<svelte:options immutable={true} />

<script lang="ts">
    import { tooltip } from "$lib/js/tooltip";
    import type { RecallProbability } from "$lib/ebm";
    import { currentRecallpb } from "$lib/js/stores";
    export let probability: RecallProbability;
</script>

<button
    class="relative hover:bg-purple-700 hover:text-white active:bg-purple-700 
    font-bold text-sm text-center  pt-2 pb-3 outline-none focus:outline-none  ease-linear transition-all duration-150
    {$currentRecallpb.recallpb === probability.recallpb
        ? 'bg-purple-700 text-white flex-grow'
        : 'bg-gray-400 text-white'}"
    type="button"
    use:tooltip={{ theme: "light" }}
    title={probability.tooltip}
    on:click={() => ($currentRecallpb = probability)}
>
    {probability.title}
    <span
        class="absolute right-0 top-0 rounded-full bg-red-500 text-gray-100 my-auto text-xs"
    >
        {probability.taskCount === 0 ? "" : probability.taskCount}
    </span>
</button>
